import React from 'react'
// import { 
//   createStore,
//   bindActionCreators,
//  } from '../redux'

import {
  useSelector,
  useDispatch,
  useBoundDispatch, // 自定义扩展官方的一个 hook
} from '../react-redux'


// 一个对象 里面的每一个属性都是一个方法 每个方法都会返回一个 action 对象
import actionCreators2 from '../store/actionCreators/counter2'

function Counter2() {
  const counter2 = useSelector(state => state.counter2) // 从仓库的总状态中取出 counter2
  const dispatch = useDispatch() // 获取仓库中派发动作的 dispatch 函数
  const boundActionCreators = useBoundDispatch(actionCreators2)
  console.log('渲染了  Counter2 函数组件')
  return <div>
    <p>{counter2.number}</p>
    <button onClick={boundActionCreators.add2}>+</button>
    <button onClick={() => dispatch(actionCreators2.minus2())}>-</button>
    <button onClick={() => {
      dispatch(actionCreators2.double2())
    }}>*2</button>
  </div>
}


export default Counter2
